<template>
	<view class="container">
		<uni-nav-bar :title="navBarData.name" fixed statusBar :border="false" leftIcon="back"
			@clickLeft="gotoBack"></uni-nav-bar>
		<title text='商品信息' />
		<view class="infoBox">
			<view class="infoBox-data">
				<text class="infoBox-title">名称：</text>
				<text>{{data?.name || '暂无'}}</text>
			</view>
			<view class="infoBox-data">
				<text class="infoBox-title">售价：</text>
				<text>{{data?.goods_sale || '暂无'}}</text>
			</view>
			<view class="infoBox-data">
				<text class="infoBox-title">商品介绍：</text>
				<text>{{data?.goods_desc || '暂无'}}</text>
			</view>
		</view>
		<title text='展示图' />
		<view class="bannerBox" v-if="Array.isArray(data?.goods_banner_imgs) && data.goods_banner_imgs.length">
			<image class="bannerBox-banner" mode='widthFix' v-for="item in data.goods_banner_imgs" :src="item?.url"
				:key="item?.uuid" :show-menu-by-longpress="true">
			</image>
		</view>
		<view class="shareBtn" hover-class="shareBtn_hover" hover-stay-time="100" @click="hanldeShare">
			<uni-icons type='paperplane' size="18" color="#666"></uni-icons>
			<text class="btnText">点击分享</text>
		</view>
		<to-top :bottom="80" :isShow="isShowTop"></to-top>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';

	const data = ref({})
	const navBarData = ref({
		name: '商品详情',
		_id: ''
	})
	const isShowTop = ref(false)

	const gotoBack = () => {
		uni.navigateBack()
	}

	const hanldeShare = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		})
	}

	const getGoodsData = async (_id = navBarData.value._id) => {
		try {
			const mallGoods = uniCloud.importObject('mall-goods')
			const res = await mallGoods.getGoodsData(_id)
			data.value = res?.data || []
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
		uni.stopPullDownRefresh()
	}

	onPullDownRefresh(() => getGoodsData())
	onLoad((options) => {
		const {
			id: _id,
			name
		} = options
		navBarData.value._id = _id
		navBarData.value.name = name

		getGoodsData()
	})
	onPageScroll(e => {
		if (e.scrollTop > 200) {
			isShowTop.value = true
		} else {
			isShowTop.value = false
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		overflow: hidden;
	}

	.bannerBox {
		width: 100%;
		margin-bottom: 50px;

		&-banner {
			width: 100%;
			will-change: transform;
			vertical-align: bottom;
		}
	}

	.infoBox {
		padding: 12px 28px;
		font-size: 14px;
		line-height: 28px;
		background-color: #fafafc;
		border: 1px solid #f6f6f8;
		box-sizing: border-box;
		color: #333;

		&-title {
			font-weight: 600;
		}

		&-data:not(:last-child) {
			margin-bottom: 8px;
		}
	}

	.shareBtn {
		border-top: 1px solid #ddd;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: white;
		font-size: 18px;
		font-weight: 300;
		color: #666;
		transition: all 0.36s;

		.btnText {
			margin-left: 6px;
		}
	}

	.shareBtn_hover {
		background-color: whitesmoke;
		color: #333;
	}
</style>